<template>
  <el-dialog
    width="500px"
    :title="title"
    :visible="visible"
    :close-on-press-escape="!getIsInitialPwd"
    :show-close="!getIsInitialPwd"
    @open="open"
    @close="close"
  >
    <el-form ref="form" label-width="80px" :model="form" :rules="rules" class="pr-10">
      <el-form-item v-if="!getIsInitialPwd" :label="$t('OLD_PWD')" prop="oldPwd">
        <el-input
          v-model.trim="form.oldPwd"
          type="password"
          maxlength="24"
          :placeholder="$t('IN_OLD_PWD')"
        />
      </el-form-item>
      <el-form-item :label="$t('NEW_PWD')" prop="newPwd">
        <el-input
          v-model.trim="form.newPwd"
          type="password"
          maxlength="24"
          :placeholder="$t('IN_NEW_PWD')"
        />
      </el-form-item>
      <el-form-item :label="$t('CFM_PWD')" prop="cfmPwd">
        <el-input
          v-model.trim="form.cfmPwd"
          type="password"
          maxlength="24"
          :placeholder="$t('IN_CFM_PWD')"
        />
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button v-if="!getIsInitialPwd" @click="close">{{ $t('CANCEL') }}</el-button>
      <el-button v-else @click="loginOut">{{ $t('LOG_OUT') }}</el-button>
      <el-button type="primary" @click="submit">{{ $t('SUBMIT') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import cryptoJs from 'crypto-js'
  import { mapGetters } from 'vuex'
  import SystemApi from '@/api/SystemApi'

  export default {
    props: {
      visible: Boolean
    },
    data() {
      return {
        form: {
          oldPwd: '',
          newPwd: null,
          cfmPwd: null
        },
        title: ''
      }
    },
    computed: {
      ...mapGetters(['getIsInitialPwd', 'getUser']),
      rules() {
        return {
          oldPwd: [
            {
              required: true,
              message: this.$t('OLD_PWD_NOT_EMPTY'),
              trigger: 'blur'
            }
          ],
          newPwd: [
            {
              required: true,
              message: this.$t('NEW_PWD_NOT_EMPTY'),
              trigger: 'blur'
            },
            {
              pattern: /^(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,24}$/,
              message: this.$t('PWD_LEN_RANGE')
            }
          ],
          cfmPwd: [
            {
              required: true,
              message: this.$t('CFM_PWD_NOT_EMPTY'),
              trigger: 'blur'
            },
            {
              pattern: /^(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,24}$/,
              message: this.$t('PWD_LEN_RANGE')
            }
          ]
        }
      }
    },
    methods: {
      open() {
        this.title = this.$t('MOD_PWD')
        this.$nextTick(() => {
          this.$refs.form && this.$refs.form.resetFields()
          if (this.getIsInitialPwd) {
            this.form.oldPwd = '123456'
            this.title = this.$t('CHANG_INITIAL_PASSWORD')
          }
          this.$refs.form && this.$refs.form.clearValidate()
        })
      },
      submit() {
        this.$refs.form.validate(valid => {
          if (!valid) {
            return false
          }
          if (this.form.newPwd !== this.form.cfmPwd) {
            this.$message.error(this.$t('PWD_NOT_MATCH'))
            return false
          }
          SystemApi.modPwd({
            oldPwd: this.cryptoPwd(this.form.oldPwd),
            newPwd: this.cryptoPwd(this.form.newPwd),
            cfmPwd: this.cryptoPwd(this.form.cfmPwd)
          }).then(result => {
            if (result) {
              this.$message.success(this.$t('PWD_MOD_SUCCESS'))
              setTimeout(() => {
                this.loginOut()
              }, 500)
            }
          })
        })
      },
      cryptoPwd(val) {
        const pwd = cryptoJs.enc.Utf8.parse(val)
        const password = cryptoJs.enc.Base64.stringify(pwd)
        return password
      },
      loginOut() {
        SystemApi.logout().then(result => {
          this.close()
          localStorage.removeItem('token')
          this.$router.replace('/login')
          location.reload()
        })
      },
      close() {
        this.form = this.$options.data().form
        this.$refs.form.clearValidate()
        this.$emit('close')
      }
    }
  }
</script>

<style scoped>
  .el-dialog__wrapper {
    line-height: 0px;
  }
</style>
